<!DOCTYPE html>
<html>
<head>
    <title>虎课解析</title>
    <link href="static/css/style.css" rel='stylesheet' type='text/css'/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="static/js/jquery-3.4.1.min.js"></script>
    <script>

        $(function(){

            $.ajax({
                url: '/index/account/login',//地址
                dataType: 'json',//数据类型
                data:{'isLogin':1},
                type: 'POST',//类型
                timeout: 2000,//超时
                //请求成功
                success: function (data, status) {

                    console.log(data)

                    if (data.code == 1){
                        window.location.href = '/wap.html'
                        // location.reload()
                    }
                },
                //失败/超时
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    if (textStatus === 'timeout') {
                        alert('請求超時');
                        setTimeout(function () {
                            alert('重新请求');
                        }, 2000);
                    }
                }
            })


            $("#doLogin").click(function () {
                let username = $("#username").val()
                let passwd = $("#password").val()


                $.ajax({
                    url: '/index/account/login',//地址
                    dataType: 'json',//数据类型
                    data:{'account':username, 'password':passwd},
                    type: 'POST',//类型
                    timeout: 2000,//超时
                    //请求成功
                    success: function (data, status) {

                        console.log(data)

                        if (data.code == 1){
                            alert('登录成功！即将自动跳转')
                            window.location.href = '/wap.html'
                        }else {
                            alert(data.error)
                            return false
                        }


                    },
                    //失败/超时
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        if (textStatus === 'timeout') {
                            alert('請求超時');
                            setTimeout(function () {
                                alert('重新请求');
                            }, 2000);
                        }
                    }
                })
            })
        })
    </script>
</head>
<body class="login-bg" style="background: url('http://i1.fuimg.com/712788/27ce723c70d1aed6.png') no-repeat fixed;">
    <div class="login-contain" style="position: absolute; left: 142.725px; top: -69.89px;">
        <div class="login-header">
            <p>视频随心看</p>
        </div>
        <div class="form-group">
            <div class="form-item">
                <label for="username">
                    <img src="/static/images/user.png">
                </label>
                <input id="username" type="text" autocomplete="off" placeholder="请输入账号">
            </div>
            <div class="form-item">
                <label for="password">
                    <img src="/static/images/password.png" alt="">
                </label>
                <input id="password" type="password" autocomplete="off" placeholder="请输入密码">
            </div>
        </div>
        <div class="button-group">
            <button class="login-btn" id="doLogin">登录</button>
        </div>
    </div>
    <script>
        $(function(){
            $(window).resize();
        });
        //js设置居中
        $(window).resize(function(){
            $(".login-contain").css({
                position: "absolute",
                left: ($(window).width() - $(".login-contain").outerWidth())/2,
                top: ($(window).height() - $(".login-contain").outerHeight())/2
            });
        });
    </script>

</body>
</html>
